<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cccc_4_3</title>
    <style>
        body {
            font-size: 14px;
            overflow: scroll;
        }

        body::-webkit-scrollbar {
            width: 5px;
            height: 8px;
            background-color: #aaa;
        }

        body::-webkit-scrollbar-thumb {
            background: #555;
        }

        table {
            border-collapse: collapse;
        }

        tr {
            border: 1px solid #999;
        }

        th,
        td {
            text-align: center;
            padding: 4px;
        }
    </style>
</head>

<body>
    <h3 id="IEBLOCK" style="width: 100%; text-align: center; color: red;display: none;">请用360等浏览器的极速模式或更换浏览器</h3>
    <button id="REFRESH">刷新</button>
    <br>
    <table id="PICK_LIST"></table>
    <script>
        var u = navigator.userAgent;
        var bws = [
            {
                name: 'ie11',
                it: u.indexOf('Trident') > -1 && u.indexOf('rv:11.0') > -1
            }, {
                name: 'ie',
                it: u.indexOf('compatible') > -1 && u.indexOf('MSIE') > -1
            }
        ];
        for (var i = 0; i < bws.length; i++) {
            if (bws[i].it) {
                document.getElementById('IEBLOCK').style.display = 'block';
                document.getElementById('MAIN').style.display = 'none';
                alert('请用浏览器的极速模式或更换浏览器');
            }
        }
    </script>
    <script src="./src/front/view/util.js"></script>
    <script>
        const PICK_LIST = $ID('PICK_LIST');
        const REFRESH = $ID('REFRESH');

        const drawTable = rows => {
            PICK_LIST.textContent = '';
            let tr = document.createElement("tr");
            tr.innerHTML = `
                <th>序号</th>
                <th>姓名</th>
                <th>部门</th>
                <th>联系方式</th>
                <th>创建时间</th>
                <th>IP</th>
                <th>删除</th>
            `
            PICK_LIST.appendChild(tr);

            for (let i = 0; i < rows.length; i++) {
                tr = document.createElement("tr");
                tr.innerHTML = `
                    <td>${rows[i].id}</td>
                    <td>${rows[i].name}</td>
                    <td>${rows[i].department}</td>
                    <td>${rows[i].phone}</td>
                    <td>${formatDate((new Date(rows[i].c_time)))}</td>
                    <td>${rows[i].ip}</td>
                    <td>
                        <button class="click_btn" onclick="del_pick(${rows[i].id})" >删除</button>
                    </td>`;
                PICK_LIST.appendChild(tr);
            }
        };

        const listTable = () => {
            getJson('/action/pick', rows => {
                console.log('all Table, length:', rows.length);

                drawTable(rows);
            });
        }

        listTable();

        REFRESH.addEventListener('click', () => {
            listTable();
        });

        const del_pick = id => {
            console.log('delete pos', id)
            delAsk(`/action/pick/${id}`, () => {
                listTable();
            })
        }

    </script>
</body>

</html>